<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            height:170px;
            background: darkcyan;
        }
        table{
            border:1px solid #000;
        }
        td{ 
            border:1px solid #000;
            padding:10px;
            text-align: center;
        }
        ul{
            list-style: none;
            display: flex;
            margin:0;
            padding:0;
        }
        li{
            width:200px;
            background: pink;
        }

        .zoom-enter-active{
            animation: zoomInDown .9s;
        }

        .zoom-leave-active{
            animation: zoomOutDown .9s;
        }

    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <h2>word === {{word}}</h2>
        <custom-input v-model="word"  ></custom-input>
        <hr>
        <h2>{{flag ?'我明天一定不会迟到':'我每天 8:30 到教室 '}}</h2>
        <base-check v-model="flag"></base-check>
    </div>

     <template id="custom-input">
         <div>
             <input type="text"  :value="word" @input="$emit('changeword',$event.target.value)" >
         </div>
     </template>

     <template id="base-check">
         <div>
            <input type="checkbox"  :checked="check" @change="$emit('changecheck',$event.target.checked)"  > 请选择
         </div>
     </template>
 
    <script>
        Vue.component("base-check",{
            template:"#base-check",
            props:{
                check:Boolean 
            },
            model:{
                prop:"check",
                event:"changecheck"
            }
        })
        Vue.component("custom-input",{
            template:"#custom-input",
            props:{
                word:String 
            },
            model:{  // 组件使用v-model 
                prop:"word",
                event:'changeword'
            }
        })

        
        const vm = new Vue({
            data:{
                title:"Vue 组件使用v-model",
                count:1314520,
                word:"wh2114-daydayup",
                check:true,
                flag:true 
            },
            components:{
               
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
         v-model 用于组件(组件上必须带Input )
         父改子 props
         子改父 自定义事件 
     -->
</body>
</html>